<template>
  <div class="bigbox">
      <div class="box1">
      <div><a @click="back"></a></div>
      <div class="gou">购物车</div>
      <div id="bianji" @click="bj">编辑</div>
    </div>
    <div>
    <div id="sectio" v-show="!a">
      <div class="box2" v-for="(item, index) in nav" :key="index">
        <!--复选框-->
        <div class="box-input">
          <input v-model="item.isSelect" @click="item.isSelect=!item.isSelect"
            type="checkbox"
            name="ipt"
            id="ipt1"
          />
        </div>
        <!--图片-->
        <div class="box-img">
          <img :src="item.src" id="img1" />
        </div>
        <!--右边文字-->
        <div class="box-wen">
          <p id="p1">{{ item.title }}</p>
          <p style="color:#c4c4c4;margin-top:3px">规格：<span>{{item.span}}</span></p>
          <div id="an1">
            <!--单价-->
            <p id="qian1">
              ￥<i>{{ item.qian }}</i>
            </p>
            <!--加减按钮-->
            <div class="jiajian">
              <span @click="jian(index)" class="span1" id="btn1">-</span>
              <span class="span2">{{ item.num }}</span>
              <span @click="jia(index)" class="span1">+</span>
            </div>
          </div>
        </div>
      </div>
      <div style="height:147px"></div>
      <!-- <div class="box3">
        &lt;!&ndash;复选框&ndash;&gt;
        <div class="box-input">
          <input type="checkbox" name="ipt" id="ipt2">
        </div>
        &lt;!&ndash;图片&ndash;&gt;
        <div class="box-img">
          <img src="../../public/img/2222.jpg" alt="" id="img2">
        </div>
        &lt;!&ndash;右边文字&ndash;&gt;
        <div class="box-wen">
          <p id="p2">Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
          <div id="an2">
            &lt;!&ndash;单价&ndash;&gt;
            <p id="qian2">￥<i>2120</i></p>
            &lt;!&ndash;加减按钮&ndash;&gt;
            <div class="jiajian">
              <span class="span1" id="btn2">-</span>
              <span class="span2">1</span>
              <span class="span1">+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box4">
        &lt;!&ndash;复选框&ndash;&gt;
        <div class="box-input">
          <input type="checkbox" name="ipt" id="ipt3">
        </div>
        &lt;!&ndash;图片&ndash;&gt;
        <div class="box-img">
          <img src="../../public/img/aa.jpg" alt="" id="img3">
        </div>
        &lt;!&ndash;右边文字&ndash;&gt;
        <div class="box-wen">
          <p id="p3">Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠</p>
          <div id="an3">
            &lt;!&ndash;单价&ndash;&gt;
            <p id="qian3">￥<i>2998</i></p>
            &lt;!&ndash;加减按钮&ndash;&gt;
            <div class="jiajian">
              <span class="span1" id="btn3">-</span>
              <span class="span2">1</span>
              <span class="span1">+</span>
            </div>
          </div>
        </div>
      </div>-->
    </div>

    <!-- 购物车为空的页面 -->
    <div class="bag" v-show="a">
      <div class="gou">
        <img src="../../public/img/bigg.png" alt="">
      </div>
      <router-link to="/store"><div class="jx">继续购物</div></router-link>
    </div>

    <div id="box5" style="border-top: 5px solid #f5f5f4" v-show="b">
      <div style="display: flex; align-items: center">
        <label style="display: flex; align-items: center" for="quan"
          ><input @click="selectProduct(isSelectAll)" v-bind:checked="isSelectAll"  type="checkbox" id="quan" />全选</label
        >
        <span style="padding: 0 0 0 14px; color: #a3a3a3">合计：<span style="color:#cc0000;font-weight:bold"></span></span>
        <span style="color: #cc0000; font-weight: bold" id="sp">￥{{getTotal.totalPrice}}</span>
      </div>
      <div>
        <span @click="jies"><a href="#">结算</a></span>
        <!--删除图标    disabled控制没选则商品就禁止触发模态框-->
        <button type="button" :disabled="!this.nav.some(nav=> nav.isSelect)" data-toggle="modal" data-target="#myModal"><i class="delete" id="del" ></i></button>
      </div>
    </div>
    </div>

    <!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content" style="height: 109px;position: fixed;width: 69%;top: 36%;left: 17%;border-radius:0px">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <button type="button" class="close" style="font-size:26px;border-bottom:0px solid #ccc;margin-right:-30px" data-dismiss="modal">x</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body" style="font-size:13px;margin-left:10px;padding-top:8px">
        确定将这1个宝贝删除？
      </div>
      <!--模态框底部-->
      <div class="modal-footer" style="margin-bottom:4px;display:flex;justify-content:center;">
        <button type="button" style="width: 122px;height: 32px;font-size: 18px;border-radius: 3px;background:#999999;border-top:none;" class="btn btn-secondary" data-dismiss="modal">我再想想</button>
        <button @click="deleteProduct" type="button" style="width: 122px;height:32px;font-size: 18px;border-radius: 3px;margin-left: 3px;background:#FD4501" class="btn btn-secondary" data-dismiss="modal">删除</button>
      </div>

    </div>
  </div>
</div>
  </div>
</template>

<style lang="less" scoped>
/*初始化*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}
.box1 {
  position: fixed;
  top: 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 53px;
  border-bottom: 1px solid #d8d8d8;
  /*position: relative;*/
  background: white;
  z-index: 1;
  span {
    color: #000000;
  }
  .gou {
    margin-left: 30px;
  }
  a {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: url("../../public/img/arrow-left.png") no-repeat center center;
    background-size: 50%;
  }
}
/*第二个*/
#sectio {
  margin-top: 50px;
}
.box2 {
  /*margin-top: 50px;*/
  display: flex;
  width: 100%;
  padding: 8px 4% 8px 5%;
  font-size: 14px;
  align-items: center;
  border-bottom: 1px solid #d8d8d8;
  img {
    width: 100%;
  }
  .box-input {
    width: 10%;
  }
  .box-img {
    width: 27%;
    margin-left: 10px;
  }
  .box-wen {
    width: 63%;
    height: 90px;
    margin-left: 20px;
    #an1 {
      margin-top: 3px;
      display: flex;
      justify-content: space-between;
      p {
        color: #cc0000;
      }
      .jiajian {
        width: 90px;
        display: flex;
        justify-content: space-evenly;
        .span1 {
          width: 23px;
          height: 23px;
          line-height: 20px;
          background: #abaaaa;
          text-align: center;
          /*border-color:#F1F1F1 ;*/
          color: white;
          outline: none;
          font-size: 20px;
          border-radius: 50%;
        }
      }
    }
  }
  input {
    width: 21px;
    height: 23px;
    position: relative;
  }
}
.box2 input:checked:before {
  content: "";
  background: url("../../public/img/check4.png") no-repeat;
  background-size: 100%;
}
.box2 input:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("../../public/img/check3.png") no-repeat center center;
  background-size: 100%;
}
/*  !*第三个*!
  .box3{
    display: flex;
    width: 100%;
    padding: 8px 4% 8px 5%;
    font-size: 14px;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    img{
      width: 100%;
    }
    .box-input{
      width: 10%;
    }
    .box-img{
      width: 27%;
      margin-left: 10px;
    }
    .box-wen{
      width: 63%;
      height: 90px;
      margin-left: 20px;
      #an2{
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        p{
          color: #cc0000;
        }
        .jiajian{
          width: 90px;
          display: flex;
          justify-content: space-evenly;
          !*.span2{*!
            !*width: 40px;*!
            !*height: 20px;*!
            !*text-align: center;*!
            !*line-height: 20px;*!
            !*background: #F1F1F1;*!
          !*}*!
          .span1{
            width: 23px;
            height: 23px;
            line-height: 20px;
            background: #abaaaa;
            text-align: center;
            !*border-color:#F1F1F1 ;*!
            color: white;
            outline: none;
            font-size: 20px;
            border-radius: 50%;
          }
        }
      }
    }
    input{
      width: 21px;
      height: 23px;
      position: relative;
    }
  }
  .box3 input:checked:before{
    content: "";
    background: url("../../public/img/check4.png") no-repeat;
    background-size: 100%;
  }
  .box3 input:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    background: url("../../public/img/check3.png") no-repeat center center;
    background-size: 100%;
  }
  !*第四个*!
  .box4{
    display: flex;
    width: 100%;
    padding: 8px 4% 8px 5%;
    font-size: 14px;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    img{
      width: 100%;
    }
    .box-input{
      width: 10%;
    }
    .box-img{
      width: 27%;
      margin-left: 10px;
    }
    .box-wen{
      width: 63%;
      height: 90px;
      margin-left: 20px;
      #an3{
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        p{
          color: #cc0000;
        }
        .jiajian{
          width: 90px;
          display: flex;
          justify-content: space-evenly;
          !*.span2{*!
            !*width: 40px;*!
            !*height: 20px;*!
            !*text-align: center;*!
            !*line-height: 20px;*!
            !*background: #F1F1F1;*!
          !*}*!
          .span1{
            width: 23px;
            height: 23px;
            line-height: 20px;
            background: #abaaaa;
            text-align: center;
            !*border-color:#F1F1F1 ;*!
            color: white;
            outline: none;
            border-radius: 50%;
            font-size: 20px;
          }
        }
      }
    }
    input{
      width: 21px;
      height: 23px;
      position: relative;
    }
  }
  .box4 input:checked:before{
    content: "";
    background: url("../../public/img/check4.png") no-repeat;
    background-size: 100%;
  }
  .box4 input:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    background: url("../../public/img/check3.png") no-repeat center center;
    background-size: 100%;
  }*/
#box5 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 98px;
  /* width: 920px; */
  width: 100%;
  height: 100px;
  padding: 0 15px;
  margin: -50px 0;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
   button{
    border: none;
    background: transparent;
    outline: none;
  }
}
#box5 input {
  width: 21px;
  height: 22px;
  position: relative;
}
#box5 input:checked:before {
  content: "";
  background: url("../../public/img/check4.png") no-repeat;
  background-size: 100%;
}
#box5 input:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("../../public/img/check3.png") no-repeat center center;
  background-size: 100%;
}
#box5 a {
  display: block;
  position: relative;
  text-decoration: none;
  color: #fff;
  background: #000000;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.delete {
  width: 46px;
  height: 46px;
  background: url("../../public/img/delete.png") no-repeat right center;
  background-size: 40%;
  /*隐藏删除图标*/
  /*display: none;*/
}
.bag{
  .gou{
    margin: auto;
    text-align: center;
    margin-top: 210px;
    img{
      width: 110px;
    }
}
  .jx{
    width: 130px;
    height: 40px;
    background: #cc0000;
    color: #fff;
    line-height: 40px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    font-size: 14px;
    }
}
  //去掉模态框里面的下边框1px
  .modal-header{
    border-bottom: none;
  }

</style>

<script>
import $ from "jquery";
//不加这个会报错 目的暴露
export default {
  data() {
    return {
      a:false,//装购物车的默认隐藏  显示空购物车
      b:true,//合计盒子的开关 默认显示
      flag:true,//给编辑按钮弄个开关
      nav: [
        // {
        //     "src": "img/1111.jpg",
        //     "title": "Leysen18K金钻石项链 钻石吊坠女 王室马车 王室马车吊坠",
        //     "span":"吊坠",
        //     "money": "2120",
        //     "num": "1"
        // },
        // {
        //     "src": "img/2222.jpg",
        //     "title": "Leysen珠宝钻石项链钻石吊坠女显钻 金18K 百变风情八瓣",
        //     "span":"k套链接",
        //     "money": "2120",
        //     "num": "1"
        // },
        // {
        //     "src": "img/aa.jpg",
        //     "title": "Leysen小王子的星空 金18k钻石吊坠女 钻石项链女 玫瑰金",
        //     "span":"玫瑰金",
        //     "money": "2998",
        //     "num": "1"
        // }
      ],
    };
  },
  methods: {
    //商品的加号
    jia(index){
      this.nav[index].num++
      localStorage.setItem('biao1',JSON.stringify(this.nav))
    },
    //商品的减号
    jian(index){
      this.nav[index].num>1?this.nav[index].num--:'1';
      //this.nav[index].num--
      localStorage.setItem('biao1',JSON.stringify(this.nav))
    },
    //显示或者隐藏
    bj() {
      if (this.flag) {
        $("#box5 span").css("display", "none");
        $(".delete").css("display", "block");
        this.flag = false;
      } else {
        $("#box5 span").css("display", "block");
        $(".delete").css("display", "none");
        this.flag = true;
      }
    },
    //全选按钮
    selectProduct(sSelect){//形参
      //遍历nav，全部取反
      for (var i = 0, len = this.nav.length; i < len; i++) {
          this.nav[i].isSelect = !sSelect;
      }
    },
    //删除已经选中(isSelect=true)的产品
    deleteProduct(){
      for(var i=0;i<this.nav.length;i++){
        if(this.nav[i].isSelect==true){
          this.nav.splice(i,1);//删除当前的一条数据
          i--;//相当于当前位置平移了 得减去1 不然等下删不到
        }
      }
      localStorage.setItem('biao1',JSON.stringify(this.nav));
      if(this.nav.length==0){//数组里面的长度为零时
        this.a=!this.a;//空购物车显示
        this.b=!this.b;//合计盒子隐藏
      }
    },
    //返回到上级页面
    back(){
      this.$router.go(-1);
    },
    //点击结算按钮事件
    jies(){
      for(var i=0;i<this.nav.length;i++){
        if(this.nav[i].isSelect==true){//有一个商品选中 就跳转结算页面
          var obj={};
          obj.src=this.nav[i].src;
          obj.title=this.nav[i].title;
          obj.span=this.nav[i].span;
          obj.money=this.nav[i].money;
          obj.num=this.nav[i].num;
          obj.qian=this.nav[i].qian;
          obj.zprice=this.getTotal.totalPrice;//总价钱
          obj.jjj=99;
          this.$store.commit("add1",obj);//到index.js接收
          this.$router.push({//跳转
            name: "Jiesuan",
          });
          //location.href="http://localhost:8080/#/jiesuan"
        }
      }
    },
  },
  computed:{
    //判断是否全选
    isSelectAll(){
      //如果nav中每一条数据的isSelect都为true，返回true，否则返回false;
      return this.nav.every((val)=>{ return val.isSelect});
    },
    // 计算商品的总价格
    getTotal(){
      //过滤掉input状态为false的
       var prolist=this.nav.filter((val)=>{ return val.isSelect});
        var totalPri=0;
        for(var i=0,len=prolist.length; i<len;i++){
          totalPri+=prolist[i].qian*prolist[i].num;
        }
        return {totalPrice:totalPri}
    }
  },
  mounted(){
    //如果没有biao1或者biao1的长度为0时      hasOwnProperty判断对象是否包含特定的自身(非继承)属性。
    if(!localStorage.hasOwnProperty("biao1")||JSON.parse(localStorage.getItem('biao1')).length==0){
      //console.log(1234);
      this.a=!this.a;//默认空购物车显示 
      this.b=!this.b;//默认合计盒子隐藏
    }else{
      //去本地拿biao1里面的所有数据
      this.nav=JSON.parse(localStorage.getItem('biao1'));
        // this.nav=this.$store.state.arr;//接收index.js中的对象
        // localStorage.setItem('biao1',JSON.stringify(this.nav));//把每一条数据存到后台去
        var that=this;
        //为nav添加select（是否选中）字段，初始值为false
        this.nav.map((item)=>{
          that.$set(item, 'isSelect',false);
        });
        //console.log(this.$store.state.arr)
    }
  },
  create(){

  },
};
</script>
